<template>
  <view class="balance-page">
    
    <!-- 余额卡片 -->
    <view class="balance-card">
      <view class="balance-title">佣金</view>
      <view class="balance-amount">{{dataJson.money}}</view>
	  <view class="balance-title" v-if="dataJson.bind_info">
	  	当前绑定银行卡:{{dataJson.bind_info.bank_name}}
	  </view>
	  <view class="balance-title" v-if="dataJson.bind_info">
	  	卡号:**** **** ****{{dataJson.bind_info.bank_card.slice(-4)}}
	  </view>
	  <button @click="tixian">提现</button>
    </view>
	 <h3 class="title">提现记录</h3>
	 <view class="list">
			<view class="items" v-for="(item,index) in listJson.list" :key="index">
				<view class="l">
					<view class="">
						银行：{{item.bank_name}}
					</view>
					<view class="">
						卡号：{{item.bank_card}}
					</view>
					<view class="time">
						时间：{{item.add_time}}
					</view>
				</view>
				<view class="r">
					 <view class="">
					 	金额：<span style="color: red;">{{item.money}}</span>
					 </view>
					 <view class="">
					 	状态：
						<span>{{type[item.pay_status]}}</span>
					 </view>
				</view>
			</view>
	 </view>
	 <view class="pages">
			<button @click="prev()">上一页</button>
			<view class="">
				{{page}}/{{listJson.page_num}}
			</view>
			<button @click="next()">下一页</button>
	 </view>
  </view>
</template>

<script>
	import {
		request
	} from '@/utils/request.js'
export default {
  data() {
    return {
		type:['待审核',"已受理","到账"],
      balance: 1258.50,
	  dataJson:{},
	  page:1,
	  listJson:{},
    }
  },
  onShow() {
  	this.getInfo();
	this.getList()
  },
  methods: {
   
	getInfo(){
		request({
			url: 'user/cash-config',
			method: 'get',
			
		}).then(res => {
			
			if (res.status == 200) {
				console.log(res.data)
				this.dataJson=res.data
			}else{
				uni.showToast({
					title: res.message,
					icon: 'none'
				})
			}
		}).catch(err=>{
			uni.showToast({
				title: err.message,
				icon: 'none'
			})
		})
	},
	getList(){
		let that = this
		request({
			url: 'user/cash-list',
			method: 'get',
			data:{
				page:that.page
			}
			
		}).then(res => {
			if (res.status == 200) {
				this.listJson = res.data;
			}else{
				uni.showToast({
					title: res.message,
					icon: 'none'
				})
			}
		}).catch(err=>{
			uni.showToast({
				title: err.message,
				icon: 'none'
			})
		})
	},
	prev(){
		if(this.page<=1){
			return
		}else{
			this.page--;
			this.getList()
		}
	},
	next(){
		if(this.page>=this.listJson.page_num){
			return
		}else{
			this.page++;
			this.getList()
		}
	},
	tixian(){
		if(!this.dataJson.bind_info){
			uni.showToast({
				title: "请前往绑定银行卡",
				icon: 'none'
			})
			return
		}
		let that = this;
		uni.showModal({
			title:'输入提现金额',
				editable:true,
				success: function (res) {
						if (res.confirm) {
							console.log('用户点击确定');
							if(res.content){
								that.cashApply(res.content)
							}
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
		})
	},
	cashApply(number){
		let aht = this
		request({
			url: 'user/cash-apply',
			method: 'post',
			data:{
				amount:number
			}
			
		}).then(res => {
			if (res.status == 200) {
				uni.showToast({
					title: "提现申请成功",
					icon: 'none'
				})
				aht.getList()
				aht.page=1
			}else{
				uni.showToast({
					title: res.message,
					icon: 'none'
				})
			}
		}).catch(err=>{
			uni.showToast({
				title: err.message,
				icon: 'none'
			})
		})
	},
    
    
  }
}
</script>

<style lang="scss" scoped>
	.button{
		width: 200rpx;
		height: 50rpx;
		border-radius: 10rpx;
	}
.balance-page {
  padding: 20rpx;
  background-color: #f7f7f7;
  min-height: 100vh;
  box-sizing: border-box;
}

.nav-bar {
  height: 88rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  
  .nav-title {
    font-size: 36rpx;
    font-weight: bold;
    color: #333;
  }
}

.balance-card {
  background: linear-gradient(135deg, #4a6cf7, #6a11cb);
  border-radius: 20rpx;
  padding: 40rpx;
  color: #fff;
  margin: 20rpx 0;
  box-shadow: 0 10rpx 20rpx rgba(0, 0, 0, 0.1);
  
  .balance-title {
    font-size: 28rpx;
    opacity: 0.9;
  }
  
  .balance-amount {
    font-size: 72rpx;
    font-weight: bold;
    margin: 20rpx 0;
  }
  
  .balance-tips {
    font-size: 24rpx;
    opacity: 0.8;
  }
}

.action-buttons {
  display: flex;
  justify-content: space-between;
  margin: 40rpx 0;
  
  .btn {
    flex: 1;
    height: 80rpx;
    line-height: 80rpx;
    border-radius: 40rpx;
    font-size: 32rpx;
    color: #fff;
    border: none;
    
    &.recharge {
      background-color: #4a6cf7;
      margin-right: 20rpx;
    }
    
    &.withdraw {
      background-color: #ff6b6b;
      margin-left: 20rpx;
    }
  }
}

.record-section {
  background-color: #fff;
  border-radius: 20rpx;
  padding: 30rpx;
  box-shadow: 0 5rpx 15rpx rgba(0, 0, 0, 0.05);
  
  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30rpx;
    
    .section-title {
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
    }
    
    .see-all {
      font-size: 26rpx;
      color: #999;
    }
  }
}

.record-list {
  .record-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 25rpx 0;
    border-bottom: 1rpx solid #f0f0f0;
    
    &:last-child {
      border-bottom: none;
    }
    
    .record-left {
      flex: 1;
    }
    
    .record-type {
      font-size: 30rpx;
      color: #333;
      margin-bottom: 10rpx;
    }
    
    .record-time {
      font-size: 24rpx;
      color: #999;
    }
    
    .record-amount {
      font-size: 32rpx;
      font-weight: bold;
      
      &.income {
        color: #4a6cf7;
      }
      
      &.expense {
        color: #ff6b6b;
      }
    }
  }
  
  .no-records {
    text-align: center;
    padding: 50rpx 0;
    color: #999;
    font-size: 28rpx;
  }
}
.title{
	font-size: 42rpx;
	margin: 30rpx 0;
	
}
.list{
	.items{
		width:700rpx;
		margin: 0 auto;
		box-sizing:border-box;
		background-color: #fff;
		margin-bottom: 20rpx;
		display: flex;
		align-items: center;
		font-size: 28rpx ;
		justify-content: space-between;
		color: #333;
		line-height: 1.8;
		padding: 30rpx;
		.time{
			font-size: 24rpx;
			color: #666;
		}
		.r{
			height: 100%;
		}
	}
}
.pages{
	display: flex;
	justify-content: space-between;
	font-size: 26rpx;
	align-items: center;
	color: #333;
	button{
		
		width: 200rpx;
		height: 60rpx;
		text-align: center;line-height: 60rpx;
		padding: 0;
		font-size: 26rpx;
		background-color: #fff;
	}
}
</style>